<template>
  <div class="home">
    <!-- 一开始进入的大图 banner 组件1 -->
    <div class="banner-border">
      <Banner :src="Src1"></Banner>
    </div>
    <div class="tuijian">
      <!-- 精品推荐 组件2 -->
      <ListHeader :src="tuijian" title="精品推荐" :did="1"></ListHeader>
      <!-- 精品推荐的列表 组件3 -->
      <GoodList :arr="jpList"></GoodList>

      <!-- 热门兑换 组件2 -->
      <ListHeader :src="hot" title="热门兑换" :did="2"></ListHeader>
      <!-- 广告 组件1 -->
      <Banner :src="ad"></Banner>
      <!-- 热门兑换的列表 组件3  -->
      <GoodList :arr="hotList"></GoodList>
    </div>
    <!-- 积分攻略 组件4 -->
    <ListHeader :src="integral" title="积分攻略" :ismore="true"></ListHeader>

    <GongLue></GongLue>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import Banner from "../components/home/Banner.vue";
import ListHeader from "../components/home/ListHeader.vue";
import GoodList from "../components/home/GoodList.vue";
import GongLue from "../components/home/GongLue.vue";
import Src1 from "../assets/images/home/banner.png";
import ad from "../assets/images/home/ad.png";
import tuijian from "../assets/images/home/Recommend.png";
import hot from "../assets/images/home/hot.png";
import integral from "../assets/images/home/integral.png";

import { getRecommendApi, getHotListApi } from "../http/api";

export default {
  name: "Home",
  components: {
    HelloWorld,
    Banner,
    ListHeader,
    GoodList,
    GongLue,
  },
  data() {
    return {
      Src1,
      ad,
      tuijian,
      hot,
      integral,
      jpList: [],
      hotList: [],
    };
  },
  created() {
    this.getJPData();
    this.getHotData();
  },
  methods: {
    async getJPData() {
      const { data } = await getRecommendApi();
      // 把请求回来的数据更新
      // this.jpList = data.data.records.map((e) => {
      //   e.coverImg = `http://sc.wolfcode.cn` + e.coverImg;
      //   return e;
      // });
      this.jpList = data.data.records
    },
    async getHotData() {
      const { data } = await getHotListApi();
      // 把请求回来的数据更新
      // this.hotList = data.data.records.map((e) => {
      //   e.coverImg = `http://sc.wolfcode.cn` + e.coverImg;
      //   return e;
      // });
      this.hotList = data.data.records
    },
  },
};
</script>
<style lang="less" scoped>
.home {
  .banner-border {
    padding-bottom: 40px;
  }
  .tuijian {
    background-color: #f5f5f5;
  }
}
</style>
